<template>
  <div class="weui-panel">
    <div class="weui-panel__hd" v-if="title">{{title}}</div>
    <div class="weui-panel__bd">
      <a :href="item.link || 'javascript:void(0);'" class="weui-media-box weui-media-box_appmsg"
         style="position:relative"
         :style="{left:(item.left*50)+'px', backgroundColor:item.backgroundColor, display:item.is_hide?'none':''}"
         v-for="(item, index) in list"
         @click.stop="onClick(index)">
        <div class="weui-media-box__hd" v-if="item.img">
          <img class="weui-media-box__thumb" v-lazy="item.img" alt="">
        </div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">{{item.title}}</h4>
          <p class="weui-media-box__desc" v-html="item.desc"></p>
          <ul class="weui-media-box__info">
            <li class="weui-media-box__info__meta" v-for="(info, index) in item.infos"
                :class="{'weui-media-box__info__meta_extra':index==item.infos.length-1}">{{info}}
            </li>
          </ul>
        </div>
        <transition-group name="fade">
          <div v-for="(_item, _index) in item.list" style="position:absolute;text-align:center;top:0;bottom:0"
               :style="{right:(-(_index+1)*50)+'px', width:50+'px', color:_item.color, backgroundColor:_item.backgroundColor}"
               v-show="!!item.left" @click.stop="$emit('on-list', index, _index)">
            <div style="position:absolute;top:50%;transform:translateY(-50%);width:100%">
              {{_item.label}}
            </div>
          </div>
        </transition-group>
      </a>
    </div>
  </div>
</template>

<script>
  import swipe from '../lib/Swipe'

  export default {
    props: {
      list: {
        type: Array,
        default() {
          return [{
            img: require('../assets/logo.png'),
            title: '我是title',
            desc: '我是desc',
            infos: ['info0', 'info1']
          }]
        }
      },
      title: {
        type: String,
        default: '我是title'
      }
    },
    data() {
      return {}
    },
    methods: {
      onClick(index) {
        this.$emit('on-click', index)
      },
      bindSwipe(node, index) {
        if (this.list[index].node == node)
          return
        this.list[index].node = node
        swipe.swipeLeft(node, () => {
          var left = this.list[index].left || 0
          if (left + this.list[index].list.length > 0)
            this.$set(this.list[index], 'left', left - 1)
        }, {
          triggerOnMove: true
        })
        swipe.swipeRight(node, () => {
          var left = this.list[index].left || 0
          if (left < 0)
            this.$set(this.list[index], 'left', left + 1)
        }, {
          triggerOnMove: true
        })
      }
    },
    updated() {
      var nodes = this.$el.childNodes,
        node = null
      for (var i = 0; i < nodes.length; i++) {
        if ('weui-panel__bd' == nodes[i].className) {
          node = nodes[i]
          break
        }
      }
      nodes = node.childNodes
      for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].className == 'weui-media-box weui-media-box_appmsg') {
          if (this.list[i].list)
            this.bindSwipe(nodes[i], i)
        }
      }
    }
  }
</script>

<style>
  @import '~weui/dist/style/weui.min.css';
</style>
